<template>
  <el-switch
    @change="changeSwitch"
    v-model="data.form[data.attr.prop]"
    active-color="#fabe00"
    class="search-switch"
    v-bind="data.attr"
  />
</template>
<script lang="ts">
import { defineComponent, ref, toRefs, reactive, onMounted } from 'vue'
import { initState } from '@/components/tableSearch/component/index'

export default defineComponent({
  name: 'MSwitch',
  setup(props, ctx) {
    const emit = ctx.emit
    const attrs = ctx.attrs
    const state = reactive<any>({
      data: {
        attr: {},
        form: {}
      }
    })
    onMounted(() => {
      state.data = initState(attrs)
    })
    const changeSwitch = (val: any) => {
      emit('changeSwitch', state.data.form, val)
    }
    return {
      changeSwitch,
      ...toRefs(state)
    }
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-switch__label.is-active) {
  color: #333 !important;
}
.search-switch {
  // margin-top: 5px;
}
</style>
